<template>
  <div class="container">
    <header class="comm-title">
      <h2 class="fl tac">
        <span class="c-333" v-if="content_type==1">发布文章</span>
        <span class="c-333" v-if="content_type==2">发起讨论</span>
        <span class="c-333" v-if="content_type==3">发布分享</span>
      </h2>
    </header>
    <el-form ref="form" :model="content">
      <el-form-item label="标题" label-width="50px" class="input-prepend restyle" :rules="[
                {
                  required: true,
                  message: '请输入标题',
                  trigger: 'blur',
                },
              ]"
      >
        <el-input v-model="content.title" type="text" placeholder="请输入标题" clearable/>
      </el-form-item>
      <el-form-item label="简介" label-width="50px">
        <el-input type="textarea" v-model="content.brief_introduction" placeholder="请输入简介" clearable/>
      </el-form-item>
      <el-row>
        <el-form-item
          label="封面"
          label-width="50px"
          class="input-prepend restyle"
          prop="avatar"
          :rules="[
                {
                  required: true,
                  message: '请上传封面',
                  trigger: 'blur',
                },
              ]"
        >
          <div>
            <el-upload
              class="avatar-uploader"
              :action="baseUrl + '/api/qingdong/ali_oss/file/upload?save_dir=cover'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="content.cover"
                :src="content.cover"
                class="cover"
              />
              <el-icon v-else class="el-icon-plus avatar-uploader-icon"
              >
                <plus
                />
              </el-icon>
            </el-upload>
          </div>
        </el-form-item>
      </el-row>
      <el-row>
        <tinymceEditor
          v-model="content.content_text"
          ref="editor"
        ></tinymceEditor>
      </el-row>
      <el-row :gutter="10" style="padding-top: 15px">
        <el-col :span="5">
          <el-form-item label="大学标签" label-width="80px">
            <el-select v-model="content.university_label_ids" filterable placeholder="搜索或选择" multiple clearable>
              <el-option
                v-for="item in university_labels"
                :key="item.id"
                :label="item.university_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="运动标签" label-width="80px">
            <el-select v-model="content.sport_label_ids" filterable placeholder="搜索或选择" multiple clearable>
              <el-option
                v-for="item in sport_labels"
                :key="item.id"
                :label="item.sport_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="text-align: center">
        <el-button type="primary" @click="create_content">提交</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import content_api from '@/api/content'
import tinymceEditor from '~/components/tinymce-editor'

export default {
  layout: 'base_layout',
  components: {
    tinymceEditor
  },

  data () {
    return {
      baseUrl: '',
      content_type: 1,
      content: {
        title: '',
        content_text: '',
        brief_introduction: '',
        cover: '',
        sport_label_ids: [],
        university_label_ids: [],
      },
      university_labels: [],
      sport_labels: [],
    }
  },
  asyncData ({
    params,
    error
  }) {
    return { content_type: params.id }
  },
  created () {
    this.init_labels()
    this.baseUrl = process.env.baseUrl
  },
  methods: {
    handleAvatarSuccess (response, file) {
      if (response.success) {
        this.content.cover = response.content.url
        this.$message.success('封面上传成功！')
      } else {
        this.$message.error('封面上传失败：' + response.error.message)
      }
    },
    beforeAvatarUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Avatar picture size can not exceed 2MB!')
      }
      return isLt2M
    },
    init_labels () {
      content_api.get_labels().then((response) => {
        if (response.data.success) {
          this.university_labels = response.data.content.university_labels
          this.sport_labels = response.data.content.sport_labels
        } else {
          this.$message.error('获取标签失败！')
        }
      })
    },
    create_content () {
      this.content.content_type = this.content_type
      content_api.create_contents(this.content).then((response) => {
        if (response.data.success) {
          this.$message.success('提交成功！')
          window.location.href = '/'
        } else {
          this.$message.error('提交失败！')
        }
      })
    },
  },
}
</script>

<style scoped>
.cover {
  width: 100%;
  height: 100%;
  display: block;
}
</style>
